<template>
  <div class="ys-Cont">
    <div class="ys-bg">
      <div class="top">
        <p>材料仪表板标题</p>
        <span>使用Roboto字体系列创建</span>
      </div>
      <div class="cont">
        <p class="title">活版印刷</p>
        <div class="list">
          <div class="list-item">
            <span>标题1</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>标题2</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>标题3</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>标题4</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>标题5</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>标题6</span>
            <div>材料仪表板的生命</div>
          </div>
          <div class="list-item">
            <span>段</span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。我理解文化。我是核心。我认为这是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。</div>
          </div>
          <div class="list-item">
            <span>引用</span>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案。我理解文化。我是核心。我认为这是我的责任，推动可能性，向人们展示，这是事情可以达到的水平。
              <p>&nbsp;&nbsp;&nbsp;&nbsp;Kanye West，音乐家</p>
            </div>
          </div>
          <div class="list-item bs">
            <span>柔和的文字 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item bs">
            <span>柔和的文字 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item bs">
            <span>信息文本 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item bs">
            <span>成功文案 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item bs">
            <span>警告文字 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item bs">
            <span>危险文本 </span>
            <div>我将成为最终价值数十亿美元的公司的领导者，因为我得到了答案......</div>
          </div>
          <div class="list-item dzbt">
            <span>小标签 </span>
            <div>带有小字幕的标题使用标题的 <a>“小”标记</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  methods: {}
}
</script>

<style lang='less'  scoped>
.ys-Cont{
  margin-left: 260px;
  padding: 20px;
  .ys-bg{
    width: 100%;
    // height: 300px;
    background:white;
    padding: 0 20px;
    box-sizing: border-box;
    .top{
      width: 100%;
      padding: 20px 0;
      background: #5DB461;
      position: relative;
      top:-20px;
      padding-left: 20px;
      border-radius: 5px;
      p{
        width: 100%;
        color: white;
      }
      span{
        display: block;
        margin-top: 10px;
        color: #BCE1BE;
        font-size: 12px;
      }
    }
    .cont{
      margin-top: 30px;
      .title{
        font-size: 40px;
        font-weight: 200;
      }
      .list{
        padding-left: 20px;
        margin-top: 40px;
        .list-item{
          display: flex;
          align-items: flex-end;
          margin: auto -12px;
          flex-wrap: wrap;
          align-items: flex-end;
          padding: 20px 0;
          span{
            flex: 1;
            color: #CCCDCE;
          }
          div{
            flex: 3;
          }
          &:nth-of-type(1) div{
              font-size: 50px;
              font-weight:300;
          }
          &:nth-of-type(2) div{
              font-size: 40px;
              font-weight:300;
          }
          &:nth-of-type(3) div{
              font-size: 30px;
              font-weight:300;
          }
          &:nth-of-type(4) div{
              font-size: 20px;
              font-weight:300;
          }
          &:nth-of-type(5) div{
              font-size: 10px;
              font-weight:300;
          }
          &:nth-of-type(6) div{
              font-size: 5px;
              font-weight:300;
          }
        }
        .bs{
          &:nth-of-type(10){
            color: #C581D1;
          }
          &:nth-of-type(11){
            color: #51D1E2;
          }
          &:nth-of-type(12){
            color: #ADDAAF;
          }
          &:nth-of-type(13){
            color: #FFD9A2;
          }
          &:nth-of-type(14){
            color: #FBBDB8;
          }
        }
        .dzbt{
          div{
            font-size: 50px;
            font-weight: 200;
            a{
              font-size: 36px;
            }
          }
        }
      }
    }
  }
}
</style>
